<script setup>
import { onMounted, onUnmounted, reactive, ref } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
// 地图触发事件
const emits=defineEmits(['SelectMarker'])
// 地图实例
const map = ref(null)
const AMap = ref(null)
const zoom= ref(6)
// 地图工具
const mapTools = ref({
  Scale:null,
  ToolBar:null,
  ControlBar:null,
  MapType:null
})

function initMap() {
  window._AMapSecurityConfig = {
    securityJsCode: '42abe75c534a35e6f01fe2ecc86c6ade'
  }
  AMapLoader.load({
    key: 'e817a26a6ac8d82d6b6436308af376d3', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [
      'AMap.Scale',
      'AMap.Geolocation',
      'AMap.Autocomplete',
      'AMap.PlaceSearch',
      'AMap.ToolBar',
      'AMap.AutoComplete',
      'AMap.ControlBar',
      'AMap.MapType'
    ] //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((amap) => {
      AMap.value = amap
      map.value = new AMap.value.Map('map', {
        // 设置地图容器id
        viewMode: '3D', // 是否为3D地图模式
        zoom:zoom.value, // 初始化地图级别
        center: [116.397428, 39.90923] // 初始化地图中心点位置
      })
      // 确保地图初始化完成后再添加插件
      addAMapPlugin()
    })
    .catch((e) => {
      console.log(e)
    })
}

function addAMapPlugin() {
  if (!AMap.value || !map.value) return

  let Geolocation = new AMap.value.Geolocation({
    enableHighAccuracy: true, //是否使用高精度定位，默认:true
    timeout: 10000, //超过10秒后停止定位，默认：5s
    position: 'RB', //定位按钮的停靠位置
    zoomToAccuracy: true //定位成功后是否自动
  })
  map.value.addControl(Geolocation)
  // 修改 Autocomplete 的初始化方式
  const autoOptions = {
    input: 'tipinput',
    city: '全国'
  }
  const autoComplete = new AMap.value.Autocomplete(autoOptions)
  const placeSearch = new AMap.value.PlaceSearch({
    map: map.value
  })
  autoComplete.on('select', function (e) {
    console.log('选择',e);
    emits('SelectMarker',e.poi)
    
    placeSearch.setCity(e.poi.adcode)
    placeSearch.search(e.poi.name)
  })
  placeSearch.on('markerClick', function (e) {
    console.log(e.data);
    
    emits('SelectMarker',e.data)
    
    // map.value.setCenter(e.poi.location)
    // map.value.setZoom(18)
  })
  // 添加定位事件监听
  Geolocation.on('complete', (data) => {
    // data是具体的定位信息
    console.log('定位成功', data)
  })
  Geolocation.on('error', (data) => {
    // 定位出错
    console.error('定位失败', data)
  })

  // 开始定位
  Geolocation.getCurrentPosition()
  // 添加工具栏
  mapTools.value.ToolBar = new AMap.value.ToolBar({
    position: {
      top: '880px',
      right: '20px'
    }
  })
  mapTools.value.Scale = new AMap.value.Scale({
    position: 'LB'
  })
  mapTools.value.ControlBar = new AMap.value.ControlBar({
    showZoomBar: true,
    showControlButton: true,
    position: {
      top: '750px',
      right: '10px'
    }
  })
  // 切换地图图层
 mapTools.value.MapType=new AMap.value.MapType({
    defaultType: 0,
    showRoad: true,
    showTraffic:true
  })
  map.value.addControl(mapTools.value.ToolBar)
  map.value.addControl(mapTools.value.Scale)
  map.value.addControl(mapTools.value.ControlBar)
  map.value.addControl(mapTools.value.MapType)
  
}

onMounted(() => {
  initMap()
})

onUnmounted(() => {
  map.value?.destroy()
})
</script>
<template>
  <div class="container">
    <div id="map"></div>
   <!-- 添加返回按钮 -->
    <!-- <div class="back-btn">
      <router-link to="/home">
        <svg viewBox="0 0 1024 1024" width="20" height="20">
          <path d="M768 903.232l-50.432 56.768L256 512l461.568-448 50.432 56.768L364.928 512z" fill="currentColor"/>
        </svg>
      </router-link>
    </div> -->
    <div id="input">
      <input id="tipinput" type="text" placeholder="请输入地址关键字" class="search-input"/>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  #map {
    width: 100vw;
    height: 100vh;
  }
  .back-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 999;
    background-color: rgba(255, 255, 255, 0.9);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;

    &:hover {
      background-color: #fff;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
      transform: scale(1.05);
    }

    a {
      color: #333;
      text-decoration: none;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }

    i {
      font-size: 20px;
    }
  }
  #input {
    position: absolute;
    top: 20px;
    right: 200px;
    z-index: 999;
    #tipinput {
      width: 200px;
      height: 30px;
      padding: 0 20px;
      border: none;
      border-radius: 25px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      font-size: small;
      transition: all 0.3s ease;
      background-color: rgba(255, 255, 255, 0.9);
      
      &:focus {
        outline: none;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        background-color: #fff;
      }
      
      &::placeholder {
        color: #999;
      }
    }
  }
  :deep(.amap-ctrl-list-layer){
    width: 150px;
    border-radius: 20px;
    font-size: 30px !important;
  }
  :deep(.auto-item){
    font-size: large;
  }
}
</style>
